import React from "react";
import GridWrapper from "../gridWrapper";
import VerticalHistogramChart from "components/charts/douban/verticalHistogramChart";
import PieChart from "components/charts/douban/pieChart";
import WordChart from "components/charts/wordChart";
import { compose, lifecycle, withStateHandlers } from "recompose";

import defaultApi from "utils/api/defaultApi";

import "assets/less/components/charts/computerChart.less";

// 布局位置
const layouts = {
  lg: [
    { i: "a", x: 0, y: 0, w: 24, h: 10, minH: 10, minW: 7 },
    { i: "b", x: 0, y: 0, w: 12, h: 15, minH: 10, minW: 7 },
    { i: "c", x: 12, y: 0, w: 12, h: 15, minH: 10, minW: 7 }
  ],
  md: [
    { i: "a", x: 0, y: 0, w: 20, h: 10, minH: 10, minW: 8 },
    { i: "b", x: 0, y: 0, w: 10, h: 15, minH: 10, minW: 7 },
    { i: "c", x: 10, y: 0, w: 10, h: 15, minH: 10, minW: 7 }
  ],
  sm: [
    { i: "a", x: 0, y: 0, w: 12, h: 10, minH: 10, minW: 6 },
    { i: "b", x: 0, y: 0, w: 6, h: 15, minH: 10, minW: 6 },
    { i: "c", x: 6, y: 0, w: 6, h: 15, minH: 10, minW: 6 }
  ]
};

const DoubanMovieChart = ({ movies }) => {
  return (
    <GridWrapper className="computer-chart" layouts={layouts}>
      <VerticalHistogramChart
        title="豆瓣热映评分榜"
        name="评分"
        data={movies}
      />
      <PieChart title="豆瓣热映观影数" name="观影人数" data={movies} />
      <WordChart title="豆瓣热映词云图" name="评分" data={movies.map(item => ({name: item.name, value: item.score}))} />
    </GridWrapper>
  );
};

export default compose(
  withStateHandlers(
    () => ({
      movies: []
    }),
    {
      updateMovieData: () => ({ movies }) => {
        return {
          movies
        };
      }
    }
  ),
  lifecycle({
    componentDidMount() {
      const { updateMovieData } = this.props;

      defaultApi("/movie").then(movies => {
        updateMovieData({ movies });
      });
    }
  })
)(DoubanMovieChart);
